<template>
  <div class="container">
    <!-- 图片 -->
    <div class="swiper-box">
      <img src="../../../static/img/team/team_top.png" alt="" />
    </div>

    <!-- 体检号 -->
    <!-- <div class="exam-no">
      <div class="exam-no-box">体检号</div>
      <div class="input-box">
        <input type="text" name="" id="" placeholder="请输入体检号" />
      </div>
    </div> -->

    <!-- 身份证号 -->
    <!-- <div class="id-card">
      <div class="id-card-box">身份证号</div>
      <div class="input-box">
        <input type="text" name="" id="" placeholder="请输入体检人身份证号" />
      </div>
    </div> -->
    <div class="form-data">
      <van-field
        v-model="examNo"
        name="体检号"
        label="体检号"
        placeholder="体检号"
        :rules="[{ required: true, message: '请输入体检号' }]"
      />
      <van-field
        v-model="cardNo"
        name="身份证号"
        label="身份证号"
        placeholder="身份证号"
        :rules="[{ required: true, message: '请输入体检人身份证号' }]"
      />
    </div>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">查询</van-button>
    </div>
    <!-- 查询 -->
    <!-- <div class="query">
      <button>查询</button>
    </div> -->
  </div>
</template> 

<script>
export default {
  data() {
    return {
      title: "Hello",
      examNo: "",
      cardNo: "",
    };
  },
  onLoad() {
    console.log("onLoad");
    this.title = "Hello";
  },
};
</script>

<style lang="less" scoped>
.container {
  // position: relative;
  background-color: #f7f7f7;
}
.swiper-box {
  height: 150px;
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.exam-no {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  margin-top: 30px;
  .exam-no-box {
    width: fit-content;
    // border: 1px solid red;
    padding: 10px;
    color: #4b4b48;
  }
  .input-box {
    // border: 1px solid red;
    input {
      text-align: right;
      font-size: 14px;
      line-height: 16px;
      width: 200px;
      padding: 10px;
    }
  }
}
.id-card {
  display: flex;
  justify-content: space-between;
  // border: 1px solid red;
  background-color: #fff;
  .id-card-box {
    width: fit-content;
    // border: 1px solid red;
    padding: 10px;
    color: #4b4b48;
  }
  .input-box {
    // border: 1px solid red;
    input {
      text-align: right;
      font-size: 14px;
      line-height: 16px;
      width: 200px;
      padding: 10px;
    }
  }
}
.query {
  position: absolute;
  bottom: 1%;
  // border: 1px solid red;
  left: 50%;
  transform: translate(-50%, -50%);
  // margin-left: 10%;
  button {
    background-color: #1e93fd;
    // padding: 0 60px;
    color: #fff;
    width: fit-content;
    width: 98vw;
  }
}
.form-data {
  margin-top: 20px;
}
</style>